<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>事件代理</title>
</head>
<body>
    <ul class="father">
        总列表
        <li class="son">第一个列表</li>
        <li class="son">第二个列表</li>
        <li class="son">第三个列表</li>
        <li class="son">第四个列表</li>
        <li class="son">第五个列表</li>
    </ul>
    <script>
        document.getElementsByClassName('father')[0].addEventListener('click',function(){
            console.log('我在点击列表-父');
        });
        document.getElementsByClassName('son')[0].addEventListener('click',function(event){
            console.log('我在点击列表-子');
            // 取消第一个列表的冒泡，点击第一个列表时，只打印子
            event.stopPropagation();
        });
    </script>
</body>
</html>